<template>
	<div>
		<!-- <view style="display: flex;flex-direction: column;width: 100%;margin: 15px;">
			<view v-if="type==='collection'">
				<view style="display: flex;">
					<text style="width: 100px;">发货方：</text>
					<text>{{list.shipName}}</text>
				</view>
				<view style="display: flex;">
					<text style="width: 100px;">收货方：</text>
					<text>{{list.deliveryName}}</text>
				</view>
			</view>
			<view v-else>
				<view style="display: flex;">
					<text style="width: 100px;">承运商：</text>
					<text>{{list.carrierName}}</text>
				</view>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">结算状态：</text>
				<text>{{settleStatus_[list.status]}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">运单编号：</text>
				<text style="font-weight: bold;">{{list.outCode}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">交易金额(元)：</text>
				<text>{{list.tradeAmount}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">运单状态：</text>
				<text>{{waybillStatus_[list.waybillStatus]}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">结算方式：</text>
				<text>{{settlementMode_[list.settlementMode]}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">剩余时间：</text>
				<text>{{list.remainDay?list.remainDay:'--'}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">创建人：</text>
				<text>{{list.createBy}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">创建时间：</text>
				<text>{{parseTime(list.createTime)}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">{{type==='collection'?'应收总额(元)':'应付总额(元)'}}：</text>
				<text>{{type==='collection'?list.receivableAmount:list.payableAmount}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">{{type==='collection'?'实收金额(元)':'实付金额(元)'}}：</text>
				<text>{{list.realAmount}}</text>
			</view>
			<view style="display: flex;">
				<text style="width: 100px;">{{type==='collection'?'应收余额(元)':'应付余额(元)'}}：</text>
				<text>{{type==='collection'?list.receivableBalance:list.payableBalance}}</text>
			</view>
			<view style="height: 10px;"></view>
		</view> -->
		<uni-list>
			<template v-if="type==='collection'">
				<uni-list-item title="发货方" :rightText="list.shipName" />
				<uni-list-item title="收货方" :rightText="list.deliveryName" />
			</template>
			<template v-else>
				<uni-list-item title="承运商" :rightText="list.carrierName" />
			</template>
			<uni-list-item title="结算状态" :rightText="settleStatus_[list.status]" />
			<uni-list-item title="运单编号" :rightText="list.outCode" />
			<uni-list-item title="交易金额(元)" :rightText="list.tradeAmount" />
			<uni-list-item title="运单状态" :rightText="waybillStatus_[list.waybillStatus]" />
			<uni-list-item title="结算方式" :rightText="settlementMode_[list.settlementMode]" />
			<uni-list-item title="剩余时间" :rightText="list.remainDay?list.remainDay:'--'" />
			<uni-list-item title="创建人" :rightText="list.createBy" />
			<uni-list-item title="创建时间" :rightText="parseTime(list.createTime)" />
			<uni-list-item :title="type==='collection'?'应收总额(元)':'应付总额(元)'" :rightText="type==='collection'?list.receivableAmount:list.payableAmount" />
			<uni-list-item :title="type==='collection'?'实收金额(元)':'实付金额(元)'" :rightText="list.realAmount" />
			<uni-list-item :title="type==='collection'?'应收余额(元)':'应付余额(元)'" :rightText="type==='collection'?list.receivableBalance:list.payableBalance" />
		</uni-list>
		<view style="height: 30px;"></view>
		<view v-for="(item,index) in formData" :key="index">
			<template><uni-tag  style="margin-left: 15px;" :inverted="true" :text="type==='collection'?'付款记录:'+(index+1):'收款记录:'+(index+1)" type="primary" /></template>
			<uni-card :title="type==='collection'?item.payer:item.payee" :sub-title="type==='collection'?'付款人':'收款人'" :extra="accountType_[type==='collection'?item.payerAccountType:item.payeeAccountType]">
				<view style="display: flex;">
					<text style="width: 88px;">{{type==='collection'?'付款人账号':'收款人账号'}}：</text>
					<text>{{type==='collection'?item.payerAccount:item.payeeAccount}}</text>
				</view>
				<view style="display: flex;">
					<text style="width: 88px;">支付方式：</text>
					<text>{{payChannel_[item.payChannel]}}</text>
				</view>
				<view style="display: flex;">
					<text style="width: 88px;">支付金额：</text>
					<text>{{item.payAmount}}</text>
				</view>
				<view style="display: flex;">
					<text style="width: 88px;">付款时间：</text>
					<text>{{parseTime(item.payTime)}}</text>
				</view>
				<view style="display: flex;">
					<text style="width: 88px;">支付凭证：</text>
					<previewfilepicker  @clickFile="clickFile_payVoucher"  readonly limit="3"  :value="fileList_payVoucher[index]" file-extname="png,jpg,jpeg" file-mediatype="image"></previewfilepicker>
				</view>
				<view style="display: flex;">
					<text style="width: 88px;">备注：</text>
					<text>{{item.remark}}</text>
				</view>
				<view style="text-align: end;font-size: 14px;color: #e43d33;">
					<view @click="deleteReceipt(item.id,index)">
						删除
					</view>
				</view>
			</uni-card>
		</view>
		<view style="height: 50px;"></view>
	</div>
</template>

<script>
	import {receivableRecord,deleteReceivableRecord} from '@/api/system/receivable.js'
	import {payableRecord,deletePayableRecord} from '@/api/system/payable.js'
	import {getDicts} from '@/api/system/dict.js'
	import {getFileList} from '@/api/system/uploadFile.js'
	import previewfilepicker from '@/components/my-file-picker.vue'
	export default {
		components: {
			previewfilepicker
		},
		data() {
			return {
				formData:{}, //收款、付款记录
				list:{},
				imageStyles: {
					width: '100%',
					height: 150,
					border: {
						radius: '4px'
					}
				},
				//结算状态
				settleStatus_:[],
				//运单状态
				waybillStatus_:[],
				//结算方式
				settlementMode_:[],
				//账号类型
				accountType_:[],
				//支付方式
				payChannel_:[],
				type:'collection',
				
				//支付凭证
				fileList_payVoucher:[]
			}
		},
		onLoad(e) {
			if (e.item&&e.type) {
				uni.showLoading({
					title: '正在加载',
				})
				this.list=JSON.parse(e.item)
				this.type=e.type
				if(e.type==='collection')
				{
					// 查询收款记录
				    receivableRecord(this.list.id).then(res => {
						this.formData = res.data||[]
					  //支付凭证列表回显
					  if(this.formData.length!==0)
					  {
					  	this.formData.forEach((item,index)=>{
					  		if(item.payVoucher!==null)
					  		{
					  			let AllFileUrl=[];
					  			AllFileUrl=item.payVoucher.split(",")
					  			getFileList(AllFileUrl).then(res2=>{
					  				this.fileList_payVoucher[index]= res2.data.map((item2,index)=>{
					  					return {
					  						id:item2.id,
					  						url: item2.url,
					  						extname: item2.fileType,
					  						name: item2.name,
					  					}
					  				})
									this.$forceUpdate()
					  			})
					  		}
					  	})
					  }
				    }).finally(() => {
						uni.hideLoading()
				    });
				}
				else
				{
					// 查询付款记录
					payableRecord(this.list.id).then(res => {
					  this.formData = res.data||[]
					  //支付凭证列表回显
					  if(this.formData.length!==0)
					  {
					  	this.formData.forEach((item,index)=>{
					  		if(item.payVoucher!==null)
					  		{
					  			let AllFileUrl=[];
					  			AllFileUrl=item.payVoucher.split(",")
					  			getFileList(AllFileUrl).then(res2=>{
					  				this.fileList_payVoucher[index]= res2.data.map((item2,index)=>{
					  					return {
					  						id:item2.id,
					  						url: item2.url,
					  						extname: item2.fileType,
					  						name: item2.name,
					  					}
					  				})
									this.$forceUpdate()
					  			})
					  		}
					  	})
					  }
					}).finally(() => {
						uni.hideLoading()
					});
				}
			}
		},
		created() {
			//结算状态
			getDicts('settle_status').then(res=>{
				res.data.forEach(item=>{
					this.settleStatus_[item.dictValue]=item.dictLabel
				})
			})
			//运单状态
			getDicts('waybill_status').then(res=>{
				res.data.forEach(item=>{
					this.waybillStatus_[item.dictValue]=item.dictLabel
				})
			})
			//结算方式
			getDicts('settle_type').then(res=>{
				res.data.forEach(item=>{
					this.settlementMode_[item.dictValue]=item.dictLabel
				})
			})
			//账号类型
			getDicts('account_type').then(res=>{
				res.data.forEach(item=>{
					this.accountType_[item.dictValue]=item.dictLabel
				})
			})
			//支付方式
			getDicts('pay_channel').then(res=>{
				res.data.forEach(item=>{
					this.payChannel_[item.dictValue]=item.dictLabel
				})
			})
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			//预览支付附件
			clickFile_payVoucher(e){
				if(e.tempFile.extname=='png'||e.tempFile.extname=='jpg'||e.tempFile.extname=='jpeg')  //预览图片
				{
					uni.previewImage({
					    current: 0, //预览图片的下标
					    urls: [e.tempFile.url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					})
				}
				else  //pdf,png,gif,jpg,doc
				{
					uni.navigateTo({
						url: "/pages/common/fileView",
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit("dataFun", {
								data: {
									name: e.tempFile.name+'预览',
									fileSrc: e.tempFile.url,
									isFileDown: true
								},
							});
						},
					});
				}
			},
			//删除收款、付款记录
			deleteReceipt(id,index){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除此条数据吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除...',
							})
							if(that.type==='collection')
							{
								deleteReceivableRecord(id).then(res2 => {
									uni.hideLoading()
									if (res2.code == '200') {
										uni.showToast({
											icon: 'none',
											title: '删除成功'
										})
										
										//重新加载列表
										that.formData.splice(index,1)
									} else {
										uni.showToast({
											icon: 'none',
											title: res2.msg
										})
									}
								})
							}
							else
							{
								deletePayableRecord(id).then(res2 => {
									uni.hideLoading()
									if (res2.code == '200') {
										uni.showToast({
											icon: 'none',
											title: '删除成功'
										})
										
										//重新加载列表
										that.formData.splice(index,1)
									} else {
										uni.showToast({
											icon: 'none',
											title: res2.msg
										})
									}
								})
							}
							
						}
					}
				});
			}
		},
	}
</script>

<style scoped>
::v-deep .uni-list-item__extra{
	flex: 1;
}
</style>